<template>
  <div>
    <el-table :data="list" :loading="loading" class="mt20" style="width: 100%">
      <el-table-column label="姓名" prop="keyboardPwdName" width="160px"></el-table-column>
      <el-table-column label="发送人" prop="senderUsername" width="100px"></el-table-column>
      <el-table-column label="密码" prop="keyboardPwd" width="160px"></el-table-column>
      <el-table-column label="密码类型" prop="keyboardPwdType" width="120px">
        <template #default="{ row }">
          <el-tag :type="getPwdTypeTagType(row.keyboardPwdType)">
            {{ getPwdTypeName(row.keyboardPwdType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="有效期" prop="date" width="300px">
        <template #default="{ row }">
          <span v-if="row.endDate === 0 || row.endDate === '0'">永久</span>
          <span v-else>{{ parseTime(row.startDate) }} ~ {{ parseTime(row.endDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" prop="createTime" width="160px">
        <template #default="{ row }">{{ parseTime(row.sendDate) }}</template>
      </el-table-column>
<!--      <el-table-column label="状态" prop="electricQuantityUpdateDate" width="100px">-->
<!--        <template #default="{ row }">-->
<!--          <span>{{ row.status }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="flex-row-center">
<!--            <el-button link type="primary" @click="handleSendMsg(row)">短信通知</el-button>-->
<!--            <el-button link type="primary">修改有效期</el-button>-->
            <el-button link type="primary" @click="handleRemove(row)">删除</el-button>
<!--            <el-button link type="primary" @click="handleRecord(row)">操作记录</el-button>-->
            <!-- <el-dropdown trigger="click" placement="bottom-start" @command="moreCommand($event, row)">
              <el-button link type="primary" class="ml10">更多</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="remove">删除</el-dropdown-item>
                  <el-dropdown-item command="record">操作记录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <SendPassword
      type="message"
      :visible="messageVisible"
      @cancel="() => messageVisible = false"
      @ok="handleSendMessageOk"
    />
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup name="KeyPane">
import { useRouter } from 'vue-router'
import SendPassword from '@/components/SendPassword'
import LockApi from "@/api/device/lock.js";
import { watch } from 'vue'

const props = defineProps({
  lockId: String
})

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const total = ref(0)
const list = ref([])
const sendKeyVisible = ref(false)
const messageVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  msgForm: {
    account: undefined,
    templateId: undefined,
    params: undefined
  }
})
const { queryParams, msgForm } = toRefs(data)

const pageNum = ref(1)
const pageSize = ref(10)

// 密码类型映射
const pwdTypeMap = {
  1: { name: '单次', desc: '只能在开始时间后6小时内使用一次', type: 'warning' },
  2: { name: '永久', desc: '从开始时间开始永久有效', type: 'success' },
  3: { name: '期限', desc: '在开始和结束时间内有效', type: 'primary' },
  4: { name: '清空', desc: '在锁上使用后会删除之前在锁上使用过的密码', type: 'danger' },
  5: { name: '周末循环', desc: '在周未开始和结束时间指定时间段内有效', type: 'info' },
  6: { name: '每日循环', desc: '每天开始和结束时间指定时间段内有效', type: 'info' },
  7: { name: '工作日循环', desc: '工作日开始和结束时间指定的时间段内有效', type: 'info' },
  8: { name: '周一循环', desc: '每周一开始和结束时间指定时间段内有效', type: 'info' },
  9: { name: '周二循环', desc: '每周二开始和结束时间指定时间段内有效', type: 'info' },
  10: { name: '周三循环', desc: '每周三开始和结束时间指定时间段内有效', type: 'info' },
  11: { name: '周四循环', desc: '每周四开始和结束时间指定时间段内有效', type: 'info' },
  12: { name: '周五循环', desc: '每周五开始和结束时间指定时间段内有效', type: 'info' },
  13: { name: '周六循环', desc: '每周六开始和结束时间指定时间段内有效', type: 'info' },
  14: { name: '周日循环', desc: '每周日开始和结束时间指定时间段内有效', type: 'info' }
}

// 获取密码类型名称
function getPwdTypeName(type) {
  return pwdTypeMap[type]?.name || '未知'
}

// 获取密码类型标签样式
function getPwdTypeTagType(type) {
  return pwdTypeMap[type]?.type || ''
}

/* 删除密码 */
function handleRemove(row) {
  proxy.$modal.confirm('确认删除该密码吗？').then(() => {
    LockApi.removePwd(row.keyboardPwdId).then(res => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess('删除成功')
        getList()
      } else {
        proxy.$modal.msgError(res.msg || '删除失败')
      }
    })
  })
}

/* 使用记录 */
function handleRecord() {
  router.push({ path: '/deviceManagement/smartLock/record' })
}

/* 短信通知 */
function handleSendMsg() {
  messageVisible.value = true
}

function handleSendMessageOk() {
  messageVisible.value = false
}

function getList() {
  if (!props.lockId) {
    return
  }
  
  loading.value = true
  const params = {
    ...queryParams.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  LockApi.getPwdList(props.lockId, params).then(res => {
    if (res.code === 200) {
      list.value = res.rows
      total.value = res.total
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

function handleCurrentChange(val) {
  pageNum.value = val
  getList()
}

function handleSearch(params) {
  pageNum.value = 1
  queryParams.value = {
    ...queryParams.value,
    ...params
  }
  getList()
}

// 监听lockId变化，确保当lockId存在时加载数据
watch(() => props.lockId, (newVal) => {
  if (newVal) {
    getList()
  } else {
    list.value = []
    total.value = 0
  }
})

getList()
</script>

<style scoped>
.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>
